<template>
	<uni-popup type="bottom" ref="IndexMore">
		<view class="IndexMore">
			<div class="header">
				<img @click="close" src="../static/close.svg" class="close-icon" alt="" srcset="">
				<text class="header-title">更多</text>
			</div>
			<view class="body">
				<view class="item" @click="scan">
					<img src="../static/scan.svg" alt="" class="item-img" srcset="">
					<text class="item-label">扫一扫</text>
				</view>
			</view>

		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: "IndexMorePopup",
		data() {
			return {

			};
		},
		methods: {
			open() {
				this.$refs.IndexMore.open()
			},
			close() {
				this.$refs.IndexMore.close()
			},
			scan() {
				uni.scanCode({
					success: function(e) {
						console.log("scanCode", e)
						if (e.errMsg === 'scanCode:ok') {
							if (e.path) {
								uni.reLaunch({
									url: '/' + e.path
								})
							}

						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.IndexMore::after {
		display: table;
		content: "";
		clear: both;
	}

	.IndexMore {
		background-color: white;
		border-top-left-radius: 30upx;
		border-top-right-radius: 30upx;
		padding-top: 24upx;


		.header {
			height: 80upx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;


			.header-title {
				font-size: 30upx;
				font-weight: bolder;
			}

			.close-icon {
				width: 40upx;
				height: 40upx;
				position: absolute;
				left: 24upx;
				top: 20upx;
			}

		}

		.body {
			padding-left: 24upx;
			padding-right: 24upx;
			margin-bottom: 20upx;
			padding-top: 20upx;
			display: grid;
			grid-column-gap: 24upx;
			grid-row-gap: 24upx;
			grid-template-columns: 1fr 1fr 1fr 1fr;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.item-img {
					width: 80upx;
					height: 80upx;
				}

				.item-label {
					margin-top: 24upx;
				}
			}

		}

	}
</style>